﻿﻿<!DOCTYPE HTML>
<html>
<head>
<title>PoC for BI Apps - Layout Editor v0.1</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="Stylesheet" type="text/css" href="../theme/css/style_reset.css" />
<link rel="Stylesheet" type="text/css" href="../theme/css/style_admin_tabs.css" />
<link rel="Stylesheet" type="text/css" href="../theme/css/button_content.css" />
<link rel="Stylesheet" type="text/css" href="../theme/css/form_content.css" />
<script type="text/JavaScript" src="../api/js/jquery-1.8.3.js"></script>
<script type='text/JavaScript' src='../../zbw_reporting/scripts/framework_include.js'></script>

<link rel="stylesheet" type="text/css" href="../api/css/jquery.contextMenu.css">
<script src="../api/js/jquery.contextMenu.js" type="text/javascript"></script>
<style type="text/css">

    *[LOC]:not(:empty) {
        border: solid 1px gray;
        background-color: #aed0ea;
        min-height: 100px;
        text-align: center;
    }

    *[LOC]:empty {
        border: solid 1px gray;
        background-color: #ffdab9;
        min-height: 100px;
        text-align: center;
    }

    *[LOC]:hover {
        background-color: #b0c4de;
        cursor: pointer;
    }
</style>

<script type="text/javascript">
    // otaism2a: 28,1,2014 to reduce multiple BOI.js while loading
    var BOI = parent.BOI;

    function save() {
        request();
    }
    function request() //genereates request XML
    {
        var records, record, param, req, class_name, method_name;
        records = [];
        class_name = "ZCL_MYBW_VAR_DEPENDENCY";
        method_name = "UPDATE";
        //clear locations and groups
        for (var i in reports) {
            if (i) {
                reports[i]['LOC'] = "";
            }
        }
        //set new locations
        $('#bi_layout').find('[REP_ID]').each(function () {
            var rname = $(this).attr('REP_ID'); //var name
            var pid = $(this).attr('LOC'); //position
            reports[rname]['LOC'] = pid;
        });
        var rep_locs = "";
        if (reports)
            for (var i in reports) //records
            {
                if (i) {
                    //get locations into one string
                    rep_locs += '|' + i + '=' + reports[i]['LOC'];
                }
            }

        if (rep_locs.indexOf('|') > -1)
            rep_locs = rep_locs.substr(1);

        layout_data['REPORTS_LOC'] = rep_locs;
        record = new BOI.BOIData.Record();

        for (var j in layout_data) //params
        {
            if (j) {
                param = new BOI.BOIData.Parameter();
                param.name = j;

                param.values = layout_data[j] == null ? [""] : [layout_data[j]];
                record.parameters.push(param);
            }
        }
        records.push(record);
        req = BOI.BOIData.request.prepare(class_name, method_name, records);

        BOI.BOIData.request.perform(req, 'text', 'POST', function (data) {
            parent.refresh(parent.current_node.data.key, 'UPDATE');
            //alert($(data).find('MESSAGE').text());
            BOI.BOILib.Util.log($(data).find('MESSAGE').text(),true);
        });
    }

    var app_id, rep_id, layout_data = {}, template_id, reports = {};

    $(function () {
        app_id = parent.app_id;
        if (parent.current_node)
            rep_id = parent.current_node.data.key;
        load(rep_id);
        $('#btn_save').on('click', function () {
            save();
        });
    });

    function load(report_id) {
        if (report_id == undefined)
            return;
        //load report details
        BOI.BOIData.read.getNode(app_id, report_id, function (data) {
            data = $(data);

            $(data).find('LAYOUT_INFO').children().each(function () {
                layout_data[this.tagName] = $(this).text();
            });

            template_id = $(data).find('LAYOUT_INFO KPI_TEMPLATE_ID').text();
            var layout = $(data).find('REPORTS_LAYOUT');
            layout.find('[LOC]').html(''); //ensure all placeholders are empty on load

            //show all reports in context menu
            var repArray = {};
            var repcount = 0;
            var reps = $(data).find('LAYOUT_INFO CHILD_REPORTS').text();
            if (reps.indexOf('|') > -1) {
                reps = reps.split('|');
                for (var i in reps) {
                    if (reps[i]) {
                        repArray[reps[i]] = { name: reps[i] };
                        repcount++;
                    }
                }
            }
            else {
                if (reps) {
                    repArray[reps] = { name: reps };
                    repcount++;
                }
            }

            var locations = {}; //hashset of locations
            var replocs = $(data).find('LAYOUT_INFO REPORTS_LOC').text();
            replocs = replocs.split('|');
            for (var i in replocs) {
                if (replocs[i]) {
                    var pcs = replocs[i].split('=');
                    if (pcs.length == 2) {
                        locations[pcs[0]] = pcs[1];
                    }
                }
            }

            //read reports and assign them to corresponding positions in layout
            $(data).find('REPORTS REPORT').each(function () {
                var name = $(this).find('TECH_NAME').text().trim();
                var title = $(this).find('TITLE').text().trim();
                var desc = $(this).find('DESCRIPTION').text().trim();
                var loc = "";

                if (locations[name])
                    loc = locations[name];

                reports[name] = {};
                $(this).children().each(function () {
                    var tag = this.tagName;
                    var text = $(this).text().trim();
                    reports[name][tag] = text;
                });

                var placeholder = '<h1>' + name + '</h1>' + '<p>' + title + '</p>';
                var item = layout.find('*[LOC="' + loc + '"]');
                item.append(placeholder);
                item.attr('REP_ID', name);
            });
            var html = layout.html();
            $('div#bi_layout').append(html);

            if (repcount > 0)
                $.contextMenu({
                    trigger: "left",
                    selector: '*[LOC]',
                    callback: function (key, options) {
                        var m = "assigned " + key + " into location " +
                                options.$trigger.attr('LOC');
                        //window.console && console.log(m) || alert(m);
                        //var gid = options.$trigger.parents('[gid]').first().attr('gid');
                        //var pid = options.$trigger.attr('pid');

                        //remove from the previous placeholder
                        $('div#bi_layout').find('[REP_ID="' + key + '"]').html('');
                        $('div#bi_layout').find('[REP_ID="' + key + '"]').removeAttr('REP_ID');

                        //put the new variable
                        options.$trigger.attr('REP_ID', key);
                        var placeholder = '<h1>' + key + '</h1>';
                        options.$trigger.html(placeholder);
                    },
                    items: repArray
                });
        });
    }
</script>
</head>
<body>

<div class="tab-frame" id="bi_admin_report_assign_reports">
    <div class="tab-form">
        <div class="header">
            <h2>Assign Reports to Template</h2>
            <ul>
                <li>
                    <a id="btn_save" class="button-content-YW" href="#"><span>Save</span></a>
                </li>
                <li>
                    <p>Click on an area to assign a report.</p>
                </li>
            </ul>
        </div>
        <div class="top-content">
            <div id="bi_layout" class="center-full"></div>
            <div class="clear"></div>
        </div>
    </div>
</div>

</body>
</html>